﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Localisation</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/south-street/jquery-ui.css" rel="stylesheet">
<link type="text/css" href="../common/demo.css" rel="stylesheet">
<style type="text/css">
#intro th, #intro td { padding: 3px 10px; }
input { padding: 0px 4px; border: none; font-size: 100%; text-align: center; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.localisation.js"></script>
<script type="text/javascript" src="greeting.js"></script>
<script type="text/javascript" src="../common/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="../common/demo.js"></script>
<script type="text/javascript">
$(function() {
	$('#download').click(function() {
		window.location = 'jquery.localisation.package-1.1.0.zip';
	});
});
</script>
</head>
<body>
<h1>jQuery Localisation</h1>
<p>A <a href="http://www.jquery.com">jQuery</a> plugin that automatically 
	loads JavaScript localisation packages based on the user's language preference.</p>
<p>The current version is <span class="version">1.1.0</span> and is available 
	under <a href="https://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt">MIT</a> licence.
	For more detail see the <a href="localisationRef.html">documentation reference</a> page.</p>
<p style="text-align: center;">
	<button type="button" id="download">Download now</button>
	<span id="bookmark"></span>
</p>
<div id="tabs">
	<ul>
		<li><a href="#intro"><span>Introduction</span></a></li>
		<li><a href="#wild"><span>In the Wild</span></a></li>
		<li><a href="#quick"><span>Quick Ref</span></a></li>
	</ul>
	<div id="intro" class="feature">
		<h2>Introduction</h2>
		<p>Localisation works by appending language indicators to the base package name
			to download and implement the contained overrides. If no specific language is given,
			the default setting for the browser is used. For example, setting the
			language to <em>English - Australian (en-AU)</em> for the <code>greeting</code> package
			causes the download and evaluation of the <code>greeting-en.js</code> and
			<code>greeting-en-AU.js</code> files (if they exist) in that order.</p>
		<p>As an example the <code>greeting</code> package has the following
			localisation packages available:</p>
		<table>
			<tr><th>File</th><th>Language</th><th>Value</th></tr>
			<tr><td>greeting.js</td><td>Default</td><td>Hello</td></tr>
			<tr><td>greeting-en.js</td><td>Standard English</td><td>Good morning</td></tr>
			<tr><td>greeting-en-AU.js</td><td>Australian English</td><td>G'day</td></tr>
			<tr><td>greeting-en-US.js</td><td>US English</td><td>Hi</td></tr>
			<tr><td>greeting-fr.js</td><td>French</td><td>Bonjour</td></tr>
		</table>
		<p>These packages just set a variable (<code>greeting</code>) that is then displayed:</p>
		<p><span class="demoLabel">Default language</span>
			<input type="text" id="defaultLang" class="ui-state-highlight" size="6" readonly></p>
		<p><span class="demoLabel">Change to another language</span>
			<select id="changeLocale">
				<option value="en">English</option>
				<option value="en-AU">English (Australian)</option>
				<option value="en-CA">English (Canadian)</option>
				<option value="en-US">English (US)</option>
				<option value="fr">Fran&ccedil;ais</option>
				<option value="xx">Unknown</option>
			</select></p>
		<p><input type="text" id="greeting" class="ui-state-highlight" readonly> for language
			<input type="text" id="languages" class="ui-state-highlight" size="6" readonly></p>
		<pre><code class="jsdemo">$('#defaultLang').val($.localise.defaultLanguage);
		
$('#changeLocale').change(function() {
		var newLang = $(this).val();
		$.localise('greeting', {language: newLang, loadBase: true});
		$('#greeting').val(greeting);
		$('#languages').val(newLang);
	}).
	val($.localise.defaultLanguage).
	change();</code></pre>
	</div>
	<div id="wild" class="feature">
		<h2>In the Wild</h2>
		<p>This tab highlights examples of this plugin in use "in the wild".</p>
		<div id="wildLinks">
			<div>
				<h3><!--a href=""></a--></h3>
				<p>None as yet.</p>
			</div>
		</div>
		<p style="clear: both;">To add another example, please contact me (kbwood{at}iinet.com.au)
			and provide the plugin name, the URL of your site, its title,
			and a short description of its purpose and where/how the plugin is used.</p>
	</div>
	<div id="quick" class="feature">
		<h2>Quick Reference</h2>
		<p>A full list of all possible uses is shown below. For more detail see the
			<a href="localisationRef.html">documentation reference</a> page.</p>
		<pre><code class="js">$.localise(package(s), settings)
$.localise(package(s), language, loadBase, path, timeout, async, complete)

$.localise.defaultLanguage

$.localize(package(s), settings)
$.localize(package(s), language, loadBase, path, timeout, async, complete)

$.localize.defaultLanguage</code></pre>
	</div>
</div>
<h2>Usage</h2>
<ol>
<li>Include the jQuery library in the head section of your page.
	<pre><code class="html">&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;</code></pre></li>
<li>Download and include the jQuery Localisation JavaScript in the head section of your page.
	<pre><code class="html">&lt;script type="text/javascript" src="js/jquery.localisation.js"&gt;&lt;/script&gt;</code></pre>
		or the minified version <code>jquery.localisation.min.js</code> (1.6K vs 5.1K, 0.8K when zipped).</li>
<li>Import your package base code.
	<pre><code class="html">&lt;script type="text/javascript" src="js/mypackage.js"&gt;&lt;/script&gt;</code></pre></li>
<li>Localise your package(s).
	<pre><code class="html">&lt;script type="text/javascript"&gt;$.localise('js/mypackage');&lt;/script&gt;</code></pre></li>
</ol>
<h2>Comments</h2>
<blockquote><p>I am using your code and has made my life very easy.</p></blockquote>
<div><cite>Parimah Mehrrostami</cite></div>
<blockquote><p>I came across your jQuery Localisation today. The demonstration is exactly
	what i've been looking for. Thank you so much for sharing it.</p></blockquote>
<div><cite>Roderick Kar</cite></div>
<blockquote><p>Just wanted to say THANKS for awesome Localisation plugin! </p></blockquote>
<div><cite>Andrzej Ośmiałowski</cite></div>
<p style="clear: both;">Contact Keith Wood at kbwood{at}iinet.com.au 
	with comments or suggestions.</p>
<h2>Change History</h2>
<table border="0" id="history" width="100%">
<tr><th>Version</th><th>Date</th><th>Changes</th></tr>
<tr><td>1.1.0</td><td>30&nbsp;Jun&nbsp;2012</td><td><ul>
	<li>Renamed <code>package</code> variable</li>
	<li>Added <code>async</code> and <code>complete</code> options for asynchronous processing</li>
</ul></td></tr>
<tr><td>1.0.5</td><td>03&nbsp;Jul&nbsp;2010</td><td><ul>
	<li>Refactor Ajax calls to avoid external interference</li>
	<li>Allow a <code>timeout</code> of zero</li>
</ul></td></tr>
<tr><td>1.0.4</td><td>07&nbsp;Mar&nbsp;2009</td><td><ul>
	<li>Added <code>path</code> settings to allow files in different locations</li>
	<li>Extended <code>localise</code> call to accept all parameters directly</li>
</ul></td></tr>
<tr><td>1.0.3</td><td>31&nbsp;Jan&nbsp;2009</td><td><ul>
	<li><code>localise</code> call now also accepts just language as a string instead of a settings object</li>
	<li>Added <code>localize</code> equivalent</li>
	<li>Moved <code>$.defaultLanguage</code> to <code>$.localise.defaultLanguage</code></li>
</ul></td></tr>
<tr><td>1.0.2</td><td>29&nbsp;Sep&nbsp;2007</td><td><ul>
	<li>Normalise language codes to format aa-AA</li>
</ul></td></tr>
<tr><td>1.0.1</td><td>01&nbsp;Sep&nbsp;2007</td><td><ul>
	<li>Renamed package to <code>jquery.localisation.*</code> to follow jQuery conventions</li>
	<li>Hid localisation declarations - functionality is only accessible via <code>$.localise</code></li>
</ul></td></tr>
<tr><td>1.0.0</td><td>20&nbsp;Jun&nbsp;2007</td><td><ul>
	<li>Initial release</li>
</ul></td></tr>
</table>
<hr>
<p>
	<a id="valid" href="http://validator.w3.org/check">
		<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict"></a>
</p>
</body>
</html>
